﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>物理连接绑定</title>
	<link rel="stylesheet" href="../css/css.css">
	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<link type="text/css" rel="Stylesheet" href="../css/plb.css" />
	<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="../js/messagecenter.js"></script>
	<script type="text/javascript" src="../js/common.js"></script>
	<script type="text/javascript" src="../js/data5.js"></script>
	<script type="text/javascript" src="../js/canvas4.js"></script>
	<style type="text/css">
		.app_text{
			color:#04A0E9;
		}
		.page-split input{
			display:inline;
			margin:0px 4px;
		}
		.r-text{
			font-size: 13px;
			text-align: center;
			margin-top: 10px;
		}

	</style>
	<script>
        window.onload = function() {
            var canvasData = {x:320 , y:52, width:Math.ceil(window.innerWidth-325)-100, height:Math.ceil(window.innerHeight-152)};
            init_canvas(canvasData ,3,lineEvent1 , lineEvent2 ,lineEvent3,iconEvent4);//初始化
            addList();
            drawCircles();
        };
        function lineEvent1(){}
        function lineEvent2(){}
        function lineEvent3(){}
        function  iconEvent4(obj){
            alert("机箱");

        }
        /**加载数据*/
        function addList(){
            /*var url="all";
            var circlesData=[];
            params={};
            $.post(url,params,"JSON").done(function(data){
                if(data){
                    circlesData=data;
                }
            });
            */
            if(circlesData==null){
                return false;
            }
            for(var i=0;i<circlesData[0].data.length;i++){
                addCanvasLevel1(i+1,circlesData[0].data[i]);
                for(var j=0;j<circlesData[0].data[i].boards.length;j++){
                    addCanvasLevel2(i ,j, circlesData[0].data[i].boards[j]);
                    for(var k=0;k<circlesData[0].data[i].boards[j].cpus.length;k++){
                        addCanvasLevel3(i ,j , k,circlesData[0].data[i].boards[j].cpus[k]);
                    }
                }
            }

        }
        /*图标双击*/
        /*处理单元相关链路查看*/
        function iconEvent4(obj1) {
            alert("图标双击");
            /* var url = '';
            var param = {id:obj.id};
            $.post(url,param,"JSON").done(function(data){
                if(data&&data.length>0){
                    addDataPop(data)
                }
            }); */
            var dataArr = [];
            for(i=1;i<=10;i++){
                var dataJson = {};
                dataJson.cpuPort1 = i;
                dataJson.cpu= "OX8E_"+i;
                dataJson.cpuPort2 = i;
                dataJson.type = "141";
                dataArr.push(dataJson);
            }
            addDataPop(dataArr);
            $("#showInfo2").show();
            tableSum2();
        }
        function addDataPop(data){
            //alert(JSON.stringify(data));
            $(".contentTableDiv2 .popTbody2").empty();
            var html = '';
            $.each(data,function(k,v){
                html += '<tr>';
                html += '<td>'+v.cpuPort1+'</td>';
                html += '<td>'+v.cpu+'</td>';
                html += '<td>'+v.cpuPort2+'</td>';
                html += '<td>'+v.type+'</td>';
                html += '</tr>';
            });
            $(".contentTableDiv2 .popTbody2").append(html);
        }
        /*物理链路端口配置*/
        /*线双击*/
        function lineEvent3(obj1,obj2){
            /* var url = '';
            var param = {id:id};
            $.post(url,param,"JSON").done(function(data){
                if(data&&data.length>0){
                    addDataPop(data)
                }
            }); */
            var dataArr = [];
            for(i=1;i<=10;i++){
                var dataJson = {};
                dataJson.id=i;
                dataJson.leftPort = i;
                dataJson.rightPort = i;
                dataJson.type = i;
                dataArr.push(dataJson);
            }
            addDataPop2(dataArr);
            $("#showInfo").show();
            tableSum();

        }

        function addDataPop2(data){
            alert(JSON.stringify(data));
            $(".contentTableDiv .popTbody").empty();
            var html = '';
            $.each(data,function(k,v){
                html += '<tr>';
                html += '<td>'+v.leftPort+'</td>';
                html += '<td>'+v.rightPort+'</td>';
                html += '<td>'+v.type+'</td>';
                html += '<td><div class="update app_text" style="cursor:pointer;" onclick="Update('+v.id+')">编辑</div><div class="delete" style="cursor:pointer;" onclick="Delete('+v.id+');">删除</div></td>\n';
                html += '</tr>';
            });
            $(".contentTableDiv .popTbody").append(html);
        }
        function tableSum2() {
            $(".contentTableDiv2").scrollTop(10);// 控制滚动条下移10px
            if ($(".contentTableDiv2").scrollTop() > 0) {
                var scrollWidth = getScrollbarWidth();
                $(".contentTableDiv2").css("right",(30-scrollWidth)+"px");
            } else {
                $(".contentTableDiv2 table").css("width", "98%");
            }
            $(".contentTableDiv2").scrollTop(0);// 滚动条返回顶部
        }
        function tableSum() {
            $(".contentTableDiv").scrollTop(10);// 控制滚动条下移10px
            if ($(".contentTableDiv").scrollTop() > 0) {
                var scrollWidth = getScrollbarWidth();
                $(".contentTableDiv").css("right",(30-scrollWidth)+"px");
            } else {
                $(".contentTableDiv table").css("width", "100%");
            }
            $(".contentTableDiv").scrollTop(0);// 滚动条返回顶部
        }
        $(function(){
            tableSum();
            tableSum2
        });
        $(window).resize(function() {
            tableSum();
            tableSum2
        });
        function getScrollbarWidth() {
            var odiv = document.createElement('div'),//创建一个div
                styles = {
                    width: '100px',
                    height: '100px',
                    overflowY: 'scroll'//让他有滚动条
                }, i, scrollbarWidth;
            for (i in styles) odiv.style[i] = styles[i];
            document.body.appendChild(odiv);//把div添加到body中
            scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;//相减
            odiv.remove();//移除创建的div
            return scrollbarWidth;//返回滚动条宽度
        }

	</script>
</head>
<body>
<div class="left_content">
	<div class="left_block1">
		<div class="left_logo"></div>
		<div class="left_title">品牌数据库编辑器，高效工作，人性化交互</div>
		<div class="left_icons">
			<div class="left_icon1"></div>
			<div class="left_icon2"></div>
			<div class="left_icon3"></div>
		</div>
	</div>
	<div class="left_block2">
		<div class="left_menu">拓扑文件库</div>
		<div class="left_menu">逻辑预案库</div>
		<div class="left_menu">部署库</div>
		<div class="left_menu">监控</div>
		<div class="left_menu">其他</div>
	</div>
	<div class="left_block3">
		<div class="left_title">快捷管理机箱、板卡、芯片，提高工作效率便捷查找功能相关物理和逻辑链接，高效编辑请登陆BDE账号</div>
		<button class="login">登录</button>
	</div>
</div>
<div class="right_content" >
	<form id="form1">
		<input type="hidden" id="curId" name="curId">
		<!-- 头部 -->
		<div class="top-bar">
			<button class="b5" type="button" onclick="showView();">预览</button>
			<button  class="b6" type="button" onclick="save2();">保存</button>
		</div>
		<!-- 右侧 -->
		<div class="right">
			<div class="r0 app_text">APP</div>
			<div class="r1">
				<div  class="shadow"><img class="addLine" clicktype = "1" style="cursor:pointer;" onclick="setDrawLine('crosshair' , lineEvent1 , lineEvent2,$(this))" src="../images/topology/line.png"></div>
				<div class="r-text">连接线</div>
			</div>
		</div>
		<!-- 左侧 -->
		<div class="table-box">

		</div>
		<!-- 底部 -->
		<div class="bottom">
			<div class="btm-bar">
				<div class="bar1">属性</div>
			</div>
			<div class="bt2">
				<div>编号&nbsp;:</div>
				<div><input type="text" id="appNo" placeholder="输入编号"/></div>
			</div>
			<div class="bt3">
				<div>名称&nbsp;:</div>
				<div><input type="text" id="appName" placeholder="输入名称"></div>
			</div>
			<div class="bt4">
				<div>类型&nbsp;:</div>
				<div style="margin-left:20px;">
					<select style="width:100px;border:none;color:#434C55;" id="appType">
						<option value="0">选择类型</option>
						<option value="1">PPC</option>
						<option value="2">SW</option>
						<option value="3">DSP</option>
						<option value="4">FPGA</option>
						<option value="5">ARM</option>
					</select>
				</div>
			</div>
			<div class="bt5">
				<div>备注&nbsp;:</div>
				<div style="position:absolute;left:40px;right:10px;top:0px;bottom:0px; "><input type="text" id="appRemark" placeholder="输入备注信息" style="width:100%;"></div>
			</div>
		</div>
	</form>
</div>
<!--处理单元相关链路查看-->
<div class="pop_content2" id="showInfo2" style="display:none;">
	<div class="pop_block2">
		<div class="pop_barInfo" >
			<div style="font-size: 18px;">APP乙端口配置</div>
			<span>Processes&nbsp;unit&nbsp;related&nbsp;to&nbsp;view</span>
		</div>
		<div class="exit_pop" ><img style="cursor:pointer;" alt="" src="../images/bsk/pop_exit.png" onclick="exit_pop2();"></div>
		<div class="headerTableDiv2">
			<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;">
				<colgroup>
					<col width="25%">
					<col width="25%">
					<col width="25%">
					<col width="25%">
				</colgroup>
				<tr>
					<td><div>处理单元甲端口</div></td>
					<td><div>处理单元</div></td>
					<td><div>对方端口号</div></td>
					<td><div>连接模式</div></td>
				</tr>
			</table>
		</div>
		<div class="contentTableDiv2">
			<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;width:100%;" >
				<colgroup>
					<col width="25%">
					<col width="25%">
					<col width="25%">
					<col width="25%">
				</colgroup>
				<tbody class="popTbody2"></tbody>
			</table>
		</div>
	</div>
</div>
<!--应用连接配置栏-->
<div class="pop_content" id="showInfo" style="display:none;">
	<div class="pop_block">
		<div class="pop_barInfo" >
			<div style="font-size: 18px;">应用连接配置栏</div>
		</div>
		<div class="exit_pop" ><img style="cursor:pointer;" alt="" src="../images/bsk/pop_exit.png" onclick="exit_pop();"></div>

		<div class="headerTableDiv">
			<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
				<colgroup>
					<col width="25%">
					<col width="25%">
					<col width="25%">
					<col width="25%">
				</colgroup>
				<tr>
					<td><div>处理单元甲端口</div></td>
					<td><div>处理单元乙端口</div></td>
					<td><div>连接模式</div></td>
					<td><div>操作</div></td>
				</tr>
			</table>
		</div>
		<div class="contentTableDiv">
			<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;" >
				<colgroup>
					<col width="25%">
					<col width="25%">
					<col width="25%">
					<col width="25%">
				</colgroup>
				<tbody class="popTbody"></tbody>
			</table>
		</div>
		<div class="pop_input">
			<table cellspacing="0" cellpadding="0" style="border-collapse: collapse;" >
				
				<tr>
					<td ><input type="text" ></td>
					<td ><input type="text" ></td>
					<td >
						<select style="width:150px;background-color:#F8F8F8;border:none;">
							<option value="1">1x</option>
							<option value="2">2x</option>
							<option value="2">3x</option>
							<option value="2">4x</option>
						</select>
					</td>
					<td >
						<div class="app_text" onclick="addConn();" style="float:left;margin-left:18px;cursor:pointer;">添加链接</div><div class="app_text" onclick="save3();" style="float:right;margin-right:30px;cursor:pointer;">保存</div>
					</td>
				</tr>
				
			</table>
			
		</div>
	</div>
</div>
</body>
<script type="text/javascript">
	var lines=lineObjs;
	
    function save2() {
        alert("保存");
		alert(JSON.stringify(lines));
		return false;
        var url="save";
        var params=lines;
        $.post(url,params,"JOSN").done(function(data){
			if(data){
				alert(data.messege);
			}
        });
    }
    function Update(id) {
        alert("编辑");
        alert(id);
        var url="";
        $.post(url,{id:id},"JOSN").done(function(){

        });
    }
    function save3(){
		alert("弹窗保存");
	}

    function exit_pop(){
        $("#showInfo").hide();
    }
    function exit_pop2(){
        $("#showInfo2").hide();
    }
	function showView(){
		
	}
</script>
</html>
